{include file="public/header"}

<body>
  <div class="layui-fluid">
    <div class="layui-row">
      <form action="" method="post" class="layui-form layui-form-pane">
        <div class="layui-card layui-form" lay-filter="component-form-element">
          <div class="layui-card-header">分类名称</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12">
              <input type="text" id="name" name="name" value="{$row.name|default=''}" required="" lay-verify="required"
                autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
        <div class="layui-card layui-form" lay-filter="component-form-element">
          <div class="layui-card-header">排序[数值越大越靠前]</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12">
              <input type="text" id="sort" name="sort" value="{$row.sort|default='0'}" required="" lay-verify="required"
                autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
        <div class="layui-card layui-form" lay-filter="component-form-element">
          <div class="layui-card-header">图标上传</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12">
              <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="test1">
                  上传图片
                </button>
                <div class="layui-upload-list">
                  <input type="hidden" value="{$row.images|default=''}" name="images" id="covers" />
                  <img class="layui-upload-img" id="demo1" src="{$row.images|default=''}"
                    style="width: 200px; height: auto" />
                </div>
                <div class="layui-progress layui-progress-big" lay-showpercent="true"
                  lay-filter="component-progress-demo">
                  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <input type="hidden" value="{$row['id']|default='0'}" name="id" />
          <button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
        </div>
      </form>
    </div>
  </div>
  {include file="public/footer"}
  <script>
    layui.use(["form", "layer", "upload"], function () {
      $ = layui.jquery;
      var form = layui.form,
        upload = layui.upload,
        element = layui.element,
        layer = layui.layer;
      //图片上传
      var uploadInst = upload.render({
        elem: "#test1",
        url: "/base/upload_img",
        accept: "images",
        before: function (obj) {
          //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
          layer.load(); //上传loading
        },
        progress: function (n, elem, res, index) {
          element.progress("component-progress-demo", n + "%");
        },
        done: function (res) {
          //如果上传失败
          if (res.status == 1) {
            layer.closeAll("loading"); //关闭loading
            return layer.msg("图片上传失败，请重试");
          }
          if (res.status == 0) {
            //上传成功
            $("#demo1").attr("src", res.data.src); //图片链接（base64）
            $("#covers").val(res.data.src);
            layer.closeAll("loading"); //关闭loading
            return layer.msg("图片上传成功");
          }
        },
        error: function () {
          //演示失败状态，并实现重传
          var demoText = $("#demoText");
          demoText.html(
            '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
          );
          demoText.find(".demo-reload").on("click", function () {
            uploadInst.upload();
          });
          layer.closeAll("loading"); //关闭loading
        },
      });
      //监听提交
      form.on("submit(add)", function (data) {
        //发异步，把数据提交给php
        $.ajax({
          type: "post",
          data: data.field,
          success: function (res) {
            if (res.status == 0) {
              layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                parent.location.reload();
                parent.layer.close(index);
              });
            } else {
              layer.msg(res.msg, { icon: 2, time: 1000 });
            }
          },
        });
        return false;
      });
    });
  </script>
</body>